CSS Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
To make it work we need to add display: grid; to the container.
In CSS Grid we can create layouts in two main ways, using:
- area: we create boxes and a layout organized by areas
- lines: a grid item is defined by having a line on each side of the box
Area
This is the easier way and one where you can change it in the future without getting a headache
On the container we can use:
- grid-template-areas: to indicate the layout, explained later
- grid-template-columns: using units how many space will take each column
- grid-template-rows: using units how many space will take each row
These properties can take any measure unit than most properties can in CSS, but the most used ones are, auto and fr (which is exclusive of grid), the latter one takes fractions of the overall size, for example, if the width was 1000px, and we had three elements, 1fr would be 333px
Understanding concepts
Grid-template-area: You create a layout with as many rows andd cols you feel like but, as the footer, if an element has to take the rest of the space you must repeate the area name
Grid-template-columns and grid-template-rows: for these properties, you must have as many values for as many rows and cols you have, and take a note that, auto will take the surplus space while fr will take from it's element asignation how many you say. Every fr value will share a correlation, each will take space from the other. Also worth noting, header and footer should have fixed units so they don't oversize
Lines
As previously mentioned, each box within a grid has one line on each side, starting from 1, thus if
we make a grid that's 2x2, we'll have:
(rowNum: 1[element]colNum: 2[element]colNum: 3)
(rowNum: 2[element]colNum: 2[element]colNum: 3)
To specify this, we make use of:
- grid-column-start: starting at column line n
- grid-column-end: ending at column line n
- grid-row-start: starting at row line n
- grid-row-end: ending at row line n